<template>
  <div>
    <b-form ref="formRef" :model="formModel" label-width="80" :rules="rules">
      <b-form-item label="用户名" prop="userName">
        <b-input placeholder="请输入用户名" type="text" v-model="formModel.userName"></b-input>
      </b-form-item>
      <b-form-item label="密码" prop="password">
        <b-input placeholder="请输入密码" showpwd v-model="formModel.password"></b-input>
      </b-form-item>
      <b-form-item label="性别">
        <b-radio v-model="formModel.gender" label="male">男</b-radio>
        <b-radio v-model="formModel.gender" label="female">女</b-radio>
        <b-radio v-model="formModel.gender" label="unknown">未知</b-radio>
      </b-form-item>
      <b-form-item label="爱好">
        <b-checkbox-group v-model="formModel.hobbies">
          <b-checkbox label="vue"></b-checkbox>
          <b-checkbox label="react"></b-checkbox>
          <b-checkbox label="js"></b-checkbox>
        </b-checkbox-group>
      </b-form-item>
      <b-form-item align="center">
        <b-button @click="handleSubmit">提交</b-button>
      </b-form-item>
    </b-form>

    <b-dialog 
      title="提示"
      width="30%"
      top="15vh"
      :visible.sync="dialogVisible"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <b-button @click="dialogVisible = false">取 消</b-button>
        <b-button type="primary" @click="dialogVisible = false">确 定</b-button>
      </span>
    </b-dialog>


  </div>
</template>

<script>
import BForm from './components/form/index'
import BFormItem from './components/formItem'
import BInput from './components/input'
import BRadio from './components/radio'
import BCheckboxGroup from './components/checkboxGroup'
import BCheckbox from './components/checkbox'
import BButton from './components/button'
import BDialog from './components/dialog'
export default {
  name: 'Form2',
  components: {
    BForm,
    BFormItem,
    BInput,
    BRadio,
    BCheckboxGroup,
    BCheckbox,
    BButton,
    BDialog,
  },
  data() {
    return {
      formModel: {
        userName: '',
        password: '',
        gender: 'female',
        hobbies: ['vue', 'react'],
      },
      rules: {
        userName: [
          { required: true, message: 'cannot be empty' }
        ],
        password: [
           { required: true, message: 'cannot be empty' }
        ]
      },
      dialogVisible: true
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.$message({
            type: 'success',
            message: 'success!',
          })
        } else {
          this.$message({
            type: 'error',
            message: 'something wrong!',
          })
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang='less'>
</style>